<template>
	<view>
		<view>
			<view style="margin: 50rpx 0 50rpx 0;">
				<rich-text :nodes="richText"></rich-text>
			</view>
			<view class="text-note">
				<text class="text-content">{{text}}</text>
			</view>
			<view style="margin-bottom: 30rpx;">
				<radio-group class="agreenment-radiogroup">
					<view class="radio-choice">
						<radio color="#FF0000" :checked="signChecked"></radio>
						<view @click="chooseSign" class="radio-note">签名</view>
					</view>
					<view class="radio-choice">
						<radio color="#FF0000" :checked="stampChecked"></radio>
						<view @click="chooseStamp" class="radio-note">盖章</view>
					</view>
				</radio-group>
			</view>
			<view style="width: 750rpx;margin-bottom: 50rpx;">
				<view class="image-block">
					<image v-if="hasImg[0]" src="@/static/delete-logo.svg" class="wrong-logo"
						@click="deleteImg"></image>
					<image v-if="!hasImg[0]" src="../../../static/wide-add-logo.svg" class="temp-logo" 
						@click="addImg(0)"></image>
					<image v-if="hasImg[0]" :src="imgUrl[0]" class="picture-style"
						@click="previewImg(0)"></image>
					<yq-avatar @upload="uploadImg" ref="imgAvatar"></yq-avatar>
				</view>
			</view>
			<button class="return-button" @click="submit">提交</button>
			<view style="height: 200rpx;"></view>
		</view>
		<u-tabbar v-model="current" :list="list" :before-switch="clickTabbar"></u-tabbar>
	</view>
</template>

<script>
	export default{
		data() {
			return {
				richText: '',
				text: '在下方选择签名或盖章选项，并上传相关图片材料，以表示同意上述声明',
				signChecked: true,
				stampChecked : false,
				hasImg: [false],
				imgUrl: [''],
				list: [
					{
						iconPath: "home",
						selectedIconPath: "home-fill",
						text: '首页',
						customIcon: false,
					},
					{
						iconPath: "photo",
						selectedIconPath: "photo-fill",
						text: '楼层管家',
						customIcon: false,
					},
					{
						iconPath: "https://cdn.uviewui.com/uview/common/min_button.png",
						selectedIconPath: "https://cdn.uviewui.com/uview/common/min_button_select.png",
						text: '发现',
						customIcon: false,
					},
					{
						iconPath: "play-right",
						selectedIconPath: "play-right-fill",
						text: '消息',
						count: 23,
						customIcon: false,
					},
					{
						iconPath: "account",
						selectedIconPath: "account-fill",
						text: '我的',
					},
				],
				current: 0
			}
		},
		mounted() {
			uni.request({
				url:'http://192.168.3.172:3000/mock/30/richTextContent',
				success: (res) => {
					this.richText = res.data
				}
			})
		},
		methods:{
			chooseSign(){
				this.signChecked = true
				this.stampChecked = false
			},
			chooseStamp(){
				this.stampChecked = true
				this.signChecked = false
			},
			uploadImg(rsp) {
			    this.$set(this.imgUrl, rsp.index, rsp.path);
			},
			addImg(index) {
				let tmp = [...this.hasImg]
				tmp[index] = true
				this.hasImg = tmp
				this.$refs.imgAvatar.fChooseImg(index,{
				    selWidth: "640upx", selHeight: "400upx",
				    expWidth: '640upx', expHeight: '400upx'
				});
			},
			previewImg(e){
				uni.previewImage({
					urls:this.imgUrl.slice(e,e+1),
					longPressActions:{
						itemList:['发送给朋友','保存图片','收藏']
					}
				})
			},
			deleteImg(){
				let tmp = [...this.hasImg]
				let imgTmp = [...this.imgUrl]
				imgTmp[0] = ''
				tmp[0] = !tmp[0]
				this.hasImg = tmp
				this.imgUrl = imgTmp
			},
			submit(){
				uni.redirectTo({
					url:'../table/table'
				})
			},
			clickTabbar(index) {
				switch(index){
					case 0:
						console.log('首页')
						uni.redirectTo({
							url:'/pages/home/home'
						})
						return true
						break
					case 1:
						console.log('楼层管家')
						return true
						break
					case 2:
						console.log('发现')
						return true
						break
					case 3:
						console.log('消息')
						uni.redirectTo({
							url:'/pages/systemAnnoucement/list/list'
						})
						return true
						break
					case 4:
						console.log('我的')
						uni.navigateTo({
							url:'/pages/myPage/myPage'
						})
						return true
						break
				}
			}
		}
	}
</script>

<style>
	.return-button{
		background-color: #007AFF;
		color: #FFFFFF;
		width: 650rpx;
	}
	.picture-style{
		width: 750rpx;
		height: 200rpx;
	}
	.text-note{
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 30rpx;
	}
	.text-content{
		width: 650rpx;
		font-weight: 700;
	}
	.agreenment-radiogroup{
		width: 650rpx;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		padding:0 50rpx 0 50rpx;
	}
	.radio-choice{
		display: flex;
		height: 80rpx;
		align-items: center;
		width: 750rpx;
	}
	.radio-note{
		width: 650rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
	}
	.image-block{
		border: solid #555555 1rpx;
		height: 200rpx;
		border-left: none;
		border-right: none;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 750rpx;
	}
	.temp-logo{
		width: 150rpx;
		height: 150rpx;
	}
	.wrong-logo{
		width: 40rpx;
		height: 40rpx;
		margin-bottom: -40rpx;
		margin-left: 710rpx;
		z-index: 999;
		background-color: #555555
	}
</style>
